<template>  
  <el-row :gutter="20">  
    <el-col :span="8">  
      <el-card class="box-card">  
        <template #header>  
          <div class="card-header">头像信息</div>  
        </template>  
        <div class="text item">  
          <div class="avatar">  
            <el-avatar class="avatar" shape="square" :size="50" :src="avatarURL"/>  
          </div>  
          <el-upload  
            ref="uploadRef"  
            class="upload-demo"  
            :limit="1"  
            :action="uploadURL"  
            :headers="headers"  
            :data="uploadData"  
            :auto-upload="false"  
            :on-success="uploadSuccess">  
            <template #trigger>  
              <p><el-button type="primary">选择头像</el-button></p>  
            </template>  
            <div>  
              <el-button type="success" @click="submitUpload">上传头像</el-button>  
            </div>  
            <template #tip>  
              <div class="el-upload__tip"><p>限制上传1个文件,且旧文件会被新文件覆盖</p></div>  
            </template>  
          </el-upload>  
        </div>  
      </el-card>  
    </el-col>  
    <el-col :span="16">  
      <el-card class="box-card">  
        <template #header>个人信息</template>  
        <div class="change-password-box">  
          <el-form ref="ruleFormRef" status-icon :model="form" :rules="rules" label-width="140px">  
            <el-form-item prop="password" label="修改密码">  
              <el-input type="password" v-model="form.password"/>  
            </el-form-item>  
            <el-form-item prop="password2" label="请再次输入密码">  
              <el-input type="password" v-model="form.password2"/>  
            </el-form-item>  
            <el-form-item>  
              <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>  
              <el-button @click="resetForm">重置</el-button>  
            </el-form-item>  
          </el-form>  
        </div>  
      </el-card>  
    </el-col>  
  </el-row>  
</template>  







<script setup>  
  import router from '../../router'
  import { ref, reactive } from 'vue'  
  import defaultAvatarURL from '/images/avatar-default.png'  
  import { uploadPictureURL,changeAdminPassword,changeAdminAvatar } from '../../api'  
  import useToken from '../../store/token'  
  import useAdmin from '../../store/admin'  
  import notification from '../../utils/notification'

  const { admin,removeAdmin,updateAdmin } = useAdmin()  
  const { token,removeToken } = useToken()  
  const headers = { jwt: token }  
  const uploadURL = uploadPictureURL()  
  const uploadData = { type: 'admin_avatar' }  
  const form = reactive({  
    password: '',  
    password2: ''  
  })  
  const avatarURL = ref(admin.avatar || defaultAvatarURL)  
  const ruleFormRef = ref()  
  const uploadRef = ref()  
  // 修改密码  
  const submitForm = (formEl) => {
  formEl.validate(async (valid) => {
    if (valid) {
      await changeAdminPassword({ password: form.password })
      resetForm()
      // 退出登录
      removeToken()
      removeAdmin()
      router.push({ name: 'login' })
      notification({
        message: '修改密码后,请重新登录',
        type: 'warning'
      })
    } else {
      notification({
        message: '表单填写有误',
        type: 'error'
      })
    }
  })
}
  const resetForm = () => {  
    ruleFormRef.value.resetFields()  
  }  
  const submitUpload = () => {  
    uploadRef.value.submit()  
  }  
  // 上传成功  
  const uploadSuccess = async (response) => {
  const { errno, errmsg, data } = response
  if (errno !== 0) {
    notification({
      message: errmsg,
      type: 'error'
    })
  } else {
    if (errmsg !== '') {
      notification({
        message: errmsg,
        type: 'success'
      })
    }
    await changeAdminAvatar({
      avatar: data.savepath
    })
    updateAdmin({
      avatar: data.url
    })
    avatarURL.value = data.url
  }
  uploadRef.value.clearFiles()
}
  const validatePass = (rule, value, callback) => {  
    if (value !== form.password) {  
      callback(new Error('两次输入密码不一致!'))  
    } else {  
      callback()  
    }  
  }  

  const rules = reactive({  
    password: [  
      { min: 6, max: 24, message: '密码长度为6~24个字符', trigger: 'blur' },  
      { required: true, message: '请输入密码', trigger: 'blur' }  
    ],  
    password2: [  
      { required: true, message: '请输入密码', trigger: 'blur' },  
      { validator: validatePass, trigger: 'blur' }  
    ]  
  })  
</script>  







<style lang="scss" scoped>  
  .avatar {  
    text-align: center;  
  }  
  .upload-demo {  
    text-align: center;  
  }  
  .box-card {  
    height: 316px;  
  }  
  .change-password-box {  
    padding-top: 38px;  
  }  
</style>  